<template>
  <div class="goods-container">
    <div class="goods" v-for="item in goodsList" :key="item.id">
      <!-- 复选框 -->
      <div class="checkbox" @click="setSelectedGoods(item)">
        <div
          class="iconfont input"
          :class="{ 'icon-fuxuankuang_xuanzhong4 checked': item.checked, 'icon-fuxuankuang_weixuanzhong2': !item.checked }"
        ></div>
      </div>
      <!-- 已选的商品及sku信息 -->
      <div class="goods-info">
        <img v-lazy="item.coverImg">
        <div class="goods-detail">
          <div class="name">{{ item.name }}</div>
          <div class="sku"><span v-for="(sku, index) in item.sku" :key="index">{{ sku }} </span></div>
        </div>
      </div>
      <!-- 价格等信息 -->
      <div class="price">
        <div class="row">
          <span class="floor">{{ $t('priceSymbol') }}{{ item.floorPrice | price }}</span>
          <span class="origin">{{ $t('priceSymbol') }}{{ item.originPrice | price }}</span>
        </div>
        <div class="tag">{{ item.tag }}</div>
      </div>
      <!-- 数值增加 -->
      <div class="number-input">
        <NumberInput :value="item.amount" @onChange="changeGoodsNumberHandler($event, item)" />
      </div>
      <!-- 金额小结 -->
      <div class="summary">{{$t('priceSymbol')}}{{ item.summary | price }}</div>
      <!-- 操作 -->
      <div class="operation">
        <div class="row">移入收藏夹</div>
        <div class="row" @click="deleteGoods(item)">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import NumberInput from '@components/common/NumberInput'

export default {
  computed: {
    ...mapGetters(['goodsList'])
  },

  created () {
    this.getGoodsList()
  },

  methods: {
    ...mapActions(['getGoodsList', 'setSelectedGoods', 'setGoodsNumber', 'deleteGoods']),

    /**
     * 改变商品数量
     * @param { Number } num 商品数量
     * @param { Object } goods 商品信息
     */
    changeGoodsNumberHandler (num, goods) {
      this.setGoodsNumber({ num, goods })
    }
  },

  components: {
    NumberInput
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable";

.goods-container {
  border: 1px solid @border-grey;
  .goods {
    background: @bg-cart;
    border-bottom: 1px solid @border-grey;
    display: flex;
    padding: 20px 0px;
    .checkbox {
      align-items: center;
      display: flex;
      width: 60px;
      text-align: center;
      justify-content: center;
      .input {
        color: @line-color-light;
        width: 18px;
        height: 18px;
        &.checked {
          color: @color-warning;
        }
      }
    }
    .goods-info {
      display: flex;
      width: 400px;
      img {
        background-color: #f4f4f4;
        border: 1px solid @line-color-light2;
        width: 100px;
        height: 100px;
      }
      .goods-detail {
        margin-left: 20px;
        margin-top: 10px;
        .name {
          cursor: pointer;
          font-size: 14px;
          &:hover {
            color: @font-color-golden;
          }
        }
        .sku {
          color: @font-color-grey;
          font-size: 12px;
          padding-top: 10px;
        }
      }
    }
    .price {
      width: 180px;
      .row {
        margin-top: 10px;
        text-align: center;
        .floor {
          color: #333333;
          font-size: 14px;
        }
        .origin {
          color: @font-color-grey;
          font-size: 12px;
          text-decoration: line-through;
          margin-left: 10px;
        }
      }
      .tag {
        border: 1px solid @bg-tips;
        border-radius: 2px;
        color: @bg-tips;
        width: fit-content;
        height: 16px;
        line-height: 14px;
        padding: 0 2px;
        margin: 10px auto;
      }
    }
    .number-input {
      height: fit-content;
      margin-top: 10px;
      width: 170px;
      .number-container {
        background: @write;
        margin: 0 auto;
      }
    }
    .summary {
      color: @color-warning;
      font-size: 14px;
      width: 150px;
      text-align: right;
      padding-right: 30px;
      padding-top: 10px;
    }
    .operation {
      color: @font-color-six;
      font-size: 14px;
      padding-left: 30px;
      .row {
        cursor: pointer;
        margin-top: 10px;
        &:hover {
          color: @font-color-golden;
        }
      }
    }
    &:last-child {
      border-bottom: 0px;
    }
  }
}
</style>
